<script setup>
import { ref } from 'vue'
import PageContainer from '@/components/container/PageContainer.vue'
// 导入路由
import { useRouter } from 'vue-router'
// 添加患者抽屉
import addPatientDrawer from '@/views/patient/components/AddPatientDrawer.vue'
// 导入病人的api
import {
  patientListService,
  patientDeleteService
} from '@/api/patient'

const router = useRouter()

// 分页数据
const params = ref({
  pageNum: 1,
  pageSize: 6,
  name: '',
  gender: ''
})

// 总数
const total = ref(0)
// 页码改变
const onCurrentChange = (page) => {
  // 重置页码
  params.value.pageNum = page
  // 发送请求获取数据
  getPatientList(params.value)
}
// 页码大小改变
const onSizeChange = (size) => {
  // 重置页码
  params.value.pageNum = 1
  // 重置每页显示条数
  params.value.pageSize = size
  // 发送请求获取数据
  getPatientList(params.value)
}
// 获取表格数据
const getPatientList = async () => {
  // 发送请求获取数据
  const res = await patientListService(params.value)
  patientList.value = res.data.data.records
  patientList.value.forEach((item) => {
    item.createTime = item.createTime.slice(0, 10)
  })
  total.value = res.data.data.total
}

// 获取表格数据
getPatientList()

// 患者列表
const patientList = ref([])

// 搜索
const onSearch = async () => {
  // 判断数据是否为空
  if (
    params.value.name === '' &&
    params.value.gender === ''
  ) {
    ElMessage.warning('请先输入搜索条件')
    return
  }
  // 发送请求获取数据
  await getPatientList(params.value)
  ElMessage.success('搜索成功')
}

// 重置
const onReset = async () => {
  // 判断数据是否为空
  if (
    params.value.name === '' &&
    params.value.gender === ''
  ) {
    ElMessage.warning('请先输入搜索条件')
    return
  }
  params.value = {
    name: '',
    gender: ''
  }
  // 重置页码
  params.value.pageNum = 1
  // 重置每页显示条数
  params.value.pageSize = 6
  // 发送请求获取数据
  await getPatientList(params.value)
  ElMessage.success('重置成功')
}

const selectPatientList = ref([])
// 表格选择事件
const handleSelectionChange = (selection) => {
  // console.log(selection)
  // 保存选择的患者
  selectPatientList.value = selection
}

const addPatientDrawerRef = ref('')
// 添加患者
const addPatient = () => {
  addPatientDrawerRef.value.open({})
}

// 编辑患者
const editPatient = (index, row) => {
  addPatientDrawerRef.value.open(row)
}

/**
 * 删除患者
 */
const deletePatient = async (index, row) => {
  const confirm = await ElMessageBox.confirm(
    `确定删除患者 ${row.name} 吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
  if (confirm) {
    // 发送请求删除患者
    await patientDeleteService(row.id)
    ElMessage.success('删除成功')
    // 刷新患者列表
    getPatientList()
  }
}

// 设计方案事件
const addPatienRecord = (index, row) => {
  // 跳转到其他页面
  router.push({
    path: '/scheme/SchemeDesign',
    state: { patientId: row.id }
  })
}
</script>

<template>
  <PageContainer title="患者管理">
    <!-- 新增患者抽屉 -->
    <addPatientDrawer
      @refresh="getPatientList"
      ref="addPatientDrawerRef"
    ></addPatientDrawer>

    <template #extra>
      <el-button type="success" @click="addPatient()"
        >添加患者</el-button
      >
    </template>
    <!-- 头部搜索表单 -->
    <div class="top-form-container">
      <el-form
        class="top-form"
        :inline="true"
        :model="params"
      >
        <div class="form-item">
          <!-- 患者信息 -->
          <el-form-item label="患者姓名:">
            <el-input
              placeholder="请输入患者姓名"
              v-model="params.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="患者性别:">
            <el-select
              v-model="params.gender"
              placeholder="请选择性别"
              size="large"
              style="width: 150px"
            >
              <el-option key="1" label="男" value="1" />
              <el-option key="2" label="女" value="2" />
            </el-select>
          </el-form-item>
        </div>

        <div class="form-btn">
          <!-- 搜索 和 重置 -->
          <el-form-item>
            <el-button type="primary" @click="onSearch">
              搜索
            </el-button>
            <el-button type="primary" @click="onReset">
              重置
            </el-button>
          </el-form-item>
        </div>
      </el-form>

      <!-- <div class="batchDelete-btn">
        <el-button type="danger" @click="batchDelete()">
          批量删除
        </el-button>
      </div> -->
    </div>

    <!-- 表格 -->
    <el-table
      ref="patientTableRef"
      :data="patientList"
      :header-cell-style="{
        textAlign: 'center',
        position: 'sticky',
        top: '0'
      }"
      :cell-style="{ textAlign: 'center' }"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
      highlight-current-row
      stripe
      size="large"
      class="patient-table"
    >
      <!-- 选择列 -->
      <el-table-column type="selection" width="80" />

      <!-- 设置编号列 -->
      <el-table-column
        type="index"
        label="编号"
        width="150"
      />

      <!-- 患者姓名 -->
      <el-table-column
        prop="name"
        label="患者姓名"
        width="200"
      />

      <!-- 性别 -->
      <el-table-column
        prop="gender"
        label="性别"
        width="150"
      >
        <template #default="scope">
          <!-- 使用el-tag判断gender, 如果为1, 显示为男, 如果为2, 显示为女 -->

          <el-tag
            size="large"
            :type="
              scope.row.gender === '1'
                ? 'primary'
                : 'danger'
            "
            >{{
              scope.row.gender === '1' ? '男' : '女'
            }}</el-tag
          >
        </template></el-table-column
      >

      <!-- 年龄 -->
      <el-table-column
        prop="age"
        label="年龄"
        width="150"
      />

      <!-- 诊断情况 -->
      <el-table-column label="诊断情况" width="150">
        <template #default="scope">
          <el-tag
            size="large"
            type="warning"
            auto-insert-space
            plain
            >{{
              scope.row.recordCount === 0
                ? '无方案'
                : scope.row.recordCount === 1
                  ? '初诊'
                  : `复诊${scope.row.recordCount}`
            }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- 创建时间列 -->
      <el-table-column
        prop="createTime"
        label="就诊时间"
        width="200"
      />

      <!-- 表格操作按钮 -->
      <!-- 功能按钮列 -->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mid"
            type="primary"
            auto-insert-space
            plain
            @click="
              addPatienRecord(scope.$index, scope.row)
            "
          >
            诊断记录
          </el-button>
          <el-button
            size="mid"
            type="success"
            auto-insert-space
            plain
            @click="editPatient(scope.$index, scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="mid"
            type="danger"
            auto-insert-space
            plain
            @click="deletePatient(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>

      <!-- 设置空数据模板 -->
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="params.pageNum"
      v-model:page-size="params.pageSize"
      :page-sizes="[6, 8, 10]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </PageContainer>
</template>

<style lang="scss" scoped>
.top-form-container {
  // 设置弹性布局
  display: flex;

  // 头部表单
  .top-form {
    display: flex;
    // 设置下边距
    margin-bottom: 20px;
    // 表格表单
    .form-item {
      .el-form-item {
        // 设置item的右边距
        margin-right: 20px;
      }
    }
    // 表单按钮
    .form-btn {
      // 设置左边距
      margin-left: 20px;
    }
  }

  // 批量删除按钮
  .batchDelete-btn {
    // 设置位置在右边
    margin-left: auto;
  }
}

// 患者表格
.patient-table {
  // 设置表格字体大小
  font-size: 16px;
  // 设置下边距
  margin-bottom: 30px;
}
</style>
